<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>echarts</title>
</head>

<body>
  <div id="main" style="width:800px;height:600px"></div>

  <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js" type="application/javascript"></script>
  <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/echarts/5.3.0-rc.1/echarts.min.js" type="application/javascript"></script>
  <!-- 导入echarts 3D支持 -->
  <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/echarts-gl/2.0.8/echarts-gl.min.js" type="application/javascript"></script>
  <script>
    let myChart = echarts.init(document.getElementById('main'))

    $.getJSON('json/flights.json', function (data) {
      var airports = data.airports.map(function (item) {
        return {
          coord: [item[3], item[4]]
        };
      });
      function getAirportCoord(idx) {
        return [data.airports[idx][3], data.airports[idx][4]];
      }
      var routesGroupByAirline = {};
      data.routes.forEach(function (route) {
        var airline = data.airlines[route[0]];
        var airlineName = airline[0];
        if (!routesGroupByAirline[airlineName]) {
          routesGroupByAirline[airlineName] = [];
        }
        routesGroupByAirline[airlineName].push(route);
      });
      var pointsData = [];
      data.routes.forEach(function (airline) {
        pointsData.push(getAirportCoord(airline[1]));
        pointsData.push(getAirportCoord(airline[2]));
      });
      var series = data.airlines
        .map(function (airline) {
          var airlineName = airline[0];
          var routes = routesGroupByAirline[airlineName];
          if (!routes) {
            return null;
          }
          return {
            type: 'lines3D',
            name: airlineName,
            effect: {
              show: true,
              trailWidth: 2,
              trailLength: 0.15,
              trailOpacity: 1,
              trailColor: 'rgb(30, 30, 60)'
            },
            lineStyle: {
              width: 1,
              color: 'rgb(50, 50, 150)',
              // color: 'rgb(118, 233, 241)',
              opacity: 0.1
            },
            blendMode: 'lighter',
            data: routes.map(function (item) {
              return [airports[item[1]].coord, airports[item[2]].coord];
            })
          };
        })
        .filter(function (series) {
          return !!series;
        });
      series.push({
        type: 'scatter3D',
        coordinateSystem: 'globe',
        blendMode: 'lighter',
        symbolSize: 2,
        itemStyle: {
          color: 'rgb(50, 50, 150)',
          opacity: 0.2
        },
        data: pointsData
      });
      myChart.setOption({
        legend: {
          selectedMode: 'single',
          left: 'left',
          data: Object.keys(routesGroupByAirline),
          orient: 'vertical',
          textStyle: {
            color: '#fff'
          }
        },
        globe: {
          environment: 'img/starfield.jpg',
          heightTexture: 'img/bathymetry_bw_composite_4k.jpg',
          displacementScale: 0.1,
          displacementQuality: 'high',
          baseColor: '#000',
          shading: 'realistic',
          realisticMaterial: {
            roughness: 0.2,
            metalness: 0
          },
          postEffect: {
            enable: true,
            depthOfField: {
              enable: false,
              focalDistance: 150
            }
          },
          temporalSuperSampling: {
            enable: true
          },
          light: {
            ambient: {
              intensity: 0
            },
            main: {
              intensity: 0.1,
              shadow: false
            },
            ambientCubemap: {
              texture: 'img/lake.hdr',
              exposure: 1,
              diffuseIntensity: 0.5,
              specularIntensity: 2
            }
          },
          viewControl: {
            autoRotate: false
          },
          silent: true
        },
        series: series
      });
      window.addEventListener('keydown', function () {
        series.forEach(function (series, idx) {
          myChart.dispatchAction({
            type: 'lines3DToggleEffect',
            seriesIndex: idx
          });
        });
      });
    });
    //myChart.setOption(option)
  </script>
</body>

</html>